<template>
	<view class="zuipageWrap">
		<uni-list class="J_zuiList">
			<uni-list-item v-for="(item, index) in tableData" :key="index" 
				:showTips="true" :badge-text="item.plandate" :title="item.pandianname" :note="item.medstorename"
				 @click="choosePlan(item)" :showArrow="choosePlanIdFlag" :note2="item.billstatus"/>
		</uni-list>
		</block>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		
		<view class="J_flabox" @click="addPlan" v-if="!choosePlanIdFlag">
			<uniIcon type="plusempty" size="40" class="J_flaboxIcon" color="#fff"></uniIcon>
		</view>
		
		<uni-drawer :visible="rightDrawerVisible" mode="right" @close="closeRightDrawer" zuiWidth="72" zuiDrawerClass="zuiDrawer">
			<view style="padding: 30upx 20upx;">
				<form @submit="formSubmit" @reset="formReset">
					<view class="section section_gap">
						<view class="section__title">计划单号</view>
						<view class="section_con">
							<input name="invoiceId" placeholder="请输入计划单号" :value="invoiceId" class="zinput J_invoiceId" />
						</view>
					</view>
					<view class="section section_gap">
						<view class="section__title">药库</view>
						<view class="section_con">
							<picker class="zpicker" @change="bindPickerChangeD" :value="supplierIndex" :range="supplierList" range-key="name">
								<view class="uni-input zinput">{{supplierList[supplierIndex].name}}</view>
							</picker>
						</view>
					</view>
					<view class="section section_gap">
						<view class="section__title">计划状态</view>
						<view class="section_con">
							<view class="uni-flex J_tagWrap">
								<view class="J_tag" @click="setTagValS('1')" :class="{'zcheck': statusMed==1}">正常</view>
								<view class="J_tag" @click="setTagValS('2')" :class="{'zcheck': statusMed==2}">已失效</view>
							</view>
						</view>
					</view>
					<view class="section section_gap">
						<view class="section__title">日期选择</view>
						<view class="section_con">
							<picker class="zpicker" mode="date" :value="startdate" :start="mindate" :end="maxdate" @change="bindDateChange">
								<view class="uni-input zinput">{{startdateDes}}</view>
							</picker>
							<text class="zsplit">-</text>
							<picker class="zpicker" mode="date" :value="enddate" :start="startdate" :end="curdate" @change="bindDateChangeS">
								<view class="uni-input zinput">{{enddateDes}}</view>
							</picker>
						</view>
					</view>
					<view class="btn-area">
						<button formType="reset" class="J_reset zbtn">重置</button>
						<button formType="submit" type="warn" class="J_sub zbtn">提交</button>
					</view>
				</form>
			</view>
		</uni-drawer>
	</view>
</template>
<script>

import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
import uniIcon from "@/components/uni-icon/uni-icon.vue";
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import {zInventoryplanList, zDrugStorageList} from '@/util/api';
import {
	mapState,mapGetters,mapMutations,mapActions
} from 'vuex'

export default {
	components: {
		uniDrawer,
		uniList,
		uniListItem,
		uniIcon
	},
	data() {
		return {
			tableData: [],
			total: 0,
			start: 1,
			pageSize: 10,
			loadMoreText: "加载中...",
			showLoadMore: false,
			rightDrawerVisible: false,
			maxlength: 20,
			invoiceId: '',
			statusMed: '',
			startdate: '',
			enddate: '',
			startdateDes: '',
			enddateDes: '',
			mindate: '',
			maxdate: '',
			curdate: '',
			supplierIndex: 0,
			supplierList: [
				{
					id: '',
					name: '全部'
				}
			],
			choosePlanIdFlag: false,
			choosePlanIdFlagS: false,
			pandianType:'0'
		}
	},
	computed: {
		
	},
	onLoad() {
		this.choosePlanIdFlag = uni.getStorageSync('choosePlanIdFlag') || false;
		this.choosePlanIdFlagS = uni.getStorageSync('choosePlanIdFlagS') || false;
		this.pandianType = uni.getStorageSync('pandianType') ;
	//console.log(this.pandianType)
		uni.removeStorageSync('choosePlanIdFlag');
		uni.removeStorageSync('choosePlanIdFlagS');
		this.initDate();
		this.fetchAllData();
	},
	onUnload() {
		this.resetPage();
	},
	onNavigationBarButtonTap(e) {
		this.rightDrawerVisible = !this.rightDrawerVisible;
	},
	onReachBottom() {
		this.showLoadMore = true;
		if(this.total && this.tableData.length < this.total){
			this.loadMoreText = "加载更多";
			this.fetchData();
		}else if(this.total && this.tableData.length == this.total){
			this.loadMoreText = "没有更多数据了!";
			return;
		}
	},
	onPullDownRefresh() {
		this.resetPage();
		this.fetchData();
	},
	methods: {
		...mapMutations(['w_setPlanId', 'w_setPlanIdS']),
		initDate () {
			let curDate = new Date(),
				cdate = this.zutil.getCurDate(curDate),
				_m = ((curDate.getMonth()+1)<10) ? ("0"+(curDate.getMonth()+1)) : (curDate.getMonth()+1),
				firstdate = curDate.getFullYear() + "-"+ _m + "-01";
				
			this.mindate = '1949-01-01';
			this.maxdate = cdate;
			this.curdate = cdate;
			this.startdate = firstdate;
			this.enddate = cdate;
			this.startdateDes = firstdate;
			this.enddateDes = cdate;
		},
		resetPage () {
			this.tableData = [];
			this.total = 0;
			this.start = 1;
			this.loadMoreText = "加载更多";
			this.showLoadMore = false;
		},
		async fetchAllData () {
			let res = await zDrugStorageList();
			res = this.zutil.formatAxiosData(res);
			if(res.status == 0){
				this.supplierList = this.supplierList.concat(res.data);
			}else{
				this.zutil.ztip(res.description || "获取药库列表失败！");
			}
			this.fetchData();
		},
		async fetchData () {
			let s1 = this.startdateDes,
				s2 = this.enddateDes;
			if(s1 == '开始日期') {
				s1 = '';
			}else{
				s1 = this.startdate;
			}
			if(s2 == '结束日期') {
				s2 = '';
			}else{
				s2 = this.enddate;
			}
			let tpl_param = {
				billCode: this.invoiceId,
				statusMed: this.statusMed,
				startdate: s1,
				enddate: s2,
				whid: this.supplierList[this.supplierIndex].id,
				page: this.start,
				pageSize: this.pageSize,
				pandianType: this.pandianType
			}
			uni.showLoading({title: '加载中', mask: true});
			let res = await zInventoryplanList(tpl_param);
			res = this.zutil.formatAxiosData(res);
			if(res.status == 0){
				this.tableData = this.tableData.concat(res.data.list);
				this.total = res.data.total;
				this.start++;
			}else{
				this.zutil.ztip(res.description || '获取盘点计划列表失败');
				this.zutil.zuiShaker();
			}
			uni.hideLoading();
			uni.stopPullDownRefresh();
		},
		closeRightDrawer() {
			this.rightDrawerVisible = false;
		},
		formSubmit: function (e) {
			let data = e.detail.value;
			this.invoiceId = data.invoiceId;
			this.rightDrawerVisible = false;
			this.resetPage();
			this.fetchData();
		},
		formReset: function (e) {
			this.initDate();
			this.invoiceId = '';
			this.statusMed = '';
			this.supplierIndex = 0;
		},
		bindDateChange: function(e) {
			this.startdate = e.target.value;
			this.startdateDes = e.target.value;
		},
		bindDateChangeS: function(e) {
			this.enddate = e.target.value;
			this.enddateDes = e.target.value;
		},
		bindPickerChangeD: function(e) {
			this.supplierIndex = e.target.value;
		},
		addPlan () {
			uni.navigateTo({
				url: '/pages/inventoryplan/add'
			});
		},
		choosePlan (item) {
			if(this.choosePlanIdFlag && !item.statusdes){
				this.w_setPlanId(item);
				uni.$emit('zInvertory', item);
				uni.navigateBack({
					delta: 1
				})
			}else if(this.choosePlanIdFlagS && !item.statusdes){
				this.w_setPlanIdS(item);
				uni.navigateBack({
					delta: 1
				})
			}
		},
		setTagValS (val) {
			this.statusMed = this.statusMed == val ? '' : val;
		},
	},
	filters:{
		//价格过滤器
		// arg表示原始参数,num表示小数点位,默认保留两位,symbol表示符号,spilt是否进行逗号分隔【true，false】
		priceFormat:function (arg,num=0,symbol,spilt=false) {
			/**
			 * 默认数字: {{number|priceFormat()}}
				保留两位小数: {{number|priceFormat(2)}}
				保留三位小数: {{number|priceFormat(3)}}
				添加￥符号并保留两位: {{number|priceFormat(2,'￥')}}
				添加$符号并保留三位: {{number|priceFormat(3,'$')}}
				添加千分号符号: {{number|priceFormat(0,'',true)}}
				添加千分号符号并保留两位: {{number|priceFormat(2,'',true)}}
				添加￥和千分号符号并保留两位: {{number|priceFormat(2,'￥',true)}}
			 **/
			arg=Number(arg).toFixed(num);
			if(spilt==true){
				if (arg.indexOf('.') == -1) {
					arg=arg.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				}else{
					var parts = arg.split(".");
					parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
					arg=parts.join(".");
				}
			}
			if(symbol){
				arg=symbol+arg;
			}
			return arg;
		},
	}
}
</script>

<style scoped lang="scss">
.zuipageWrap {
	background: #F5F5F5;
	
	.J_zuiList {
		
	}
	
	.J_flabox {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
		right: 30upx;
		bottom: 60upx;
		width: 110upx;
		height: 110upx;
		border-radius: 50%;
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
		z-index: 11;
		background: rgb(0, 122, 255);
		.J_flaboxIcon {
			color: #fff!important;
			font-weight: bold;
		}
	}
}
/**
 * 侧边栏
 **/
.zuiDrawer {
	.zinput {
		div {
			width: 100%;
			padding: 0 10px;
			.input-placeholder {
				font-size: 12px;
			}
		}
	}
	.section_gap {
		margin-bottom: 40upx;
		.section__title {
			font-size: 34upx;
			margin-bottom: 20upx;
			color: #000;
			position: relative;
			padding-left: 20upx;
			
			&:before {
				position: absolute;
				left: 0;
				top: 12upx;
				content: '';
				width: 6upx;
				background: #e64340;
				height: 60%;
			}
		}
		.section_con {
			margin-bottom: 20upx;
			display: flex;
			.zsplit {
				height: 64upx;
				line-height: 64upx;
				text-align: center;
				width: 80upx;
				font-size: 40upx;
				font-weight: normal;
			}
			.zinput {
				display: inline-block;
				width: 100%;
				border: 1px solid #F6F6F6;
				background: #F6F6F6;
				border-radius: 60upx;
				height: 64upx;
				line-height: 64upx;
				text-align: center;
				padding: 0;
				overflow: hidden;
				div {
					width: 100%;
					text-align: center;
					input {
						width: 90%;
						text-align: center;
					}
				}
			}
			.J_tagWrap {
				align-items: center;
				justify-content: space-around;
				width: 100%;
				.J_tag {
					padding: 0 16upx;
					height: 64upx;
					line-height: 64upx;
					width: 100%;
					background: #f6f6f6;
					color: #333;
					text-align: center;
					border-radius: 60upx;
					margin-left: 20upx;
					border: 2upx solid #F1F1F1;
					
					&.zcheck {
						background: #FEF4F3;
						color: #FF0000;
						border: 2upx solid #FF0000;
					}
					
					&:first-child {
						margin-left: 0;
					}
				}
			}
			.zpicker {
				width: 100%;
			}
		}
	}
	.btn-area {
		position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
		height: 92upx;
		.zbtn {
			border: 0;
			border-radius: 0;
			display: inline-block;
			&:after {
				width: 0;
				height: 0;
			}
			&.J_sub {
				width: 65%;
			}
			&.J_reset {
				width: 35%;
			}
		}
	}
}
</style>
